<template>
  <div class="box">
    <div class="top">
      <div class="top_lift">
        <div class="header">运营人员（当天）</div>
        <div class="body">
          <ul>
            <li>
              <div>{{ headerData.total }}</div>
              <span>工单总数（个）</span>
            </li>
            <li>
              <div>{{ headerData.completedTotal }}</div>
              <span>完成工单（个）</span>
            </li>
            <li>
              <div>{{ headerData.cancelTotal }}</div>
              <span>拒绝工单（个）</span>
            </li>
            <li>
              <div>{{ headerData.workerCount }}</div>
              <span>运营人员数（个）</span>
            </li>
          </ul>
        </div>
      </div>
      <div class="top_right">
        <div class="header">运维人员（当天）</div>
        <div class="body">
          <ul>
            <li>
              <div>{{ headerDatas.total }}</div>
              <span>工单总数（个）</span>
            </li>
            <li>
              <div>{{ headerDatas.completedTotal }}</div>
              <span>完成工单（个）</span>
            </li>
            <li>
              <div>{{ headerDatas.cancelTotal }}</div>
              <span>拒绝工单（个）</span>
            </li>
            <li>
              <div>{{ headerDatas.workerCount }}</div>
              <span>运维人员数（个）</span>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="bottom">
      <div class="bottom-left">
        <div class="left-top">
          <div class="text">工单状态</div>
          <div class="time">
            <el-date-picker
              v-model="queryParam.payData"
              type="daterange"
              class="daterange"
              range-separator="~"
              start-placeholder=""
              end-placeholder=""
              value-format="yyyy-MM-dd"
            />
            <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
              <el-tab-pane label="周" name="0" />
              <el-tab-pane label="月" name="1" />
              <el-tab-pane label="年" name="2" />
            </el-tabs>
          </div>
        </div>
        <div class="left-bottom">
          <!-- <div v-show="!bottomData.length" class="one">
            <div class="img">
              <img
                src="https://likede2-admin.itheima.net/img/empty.87c4f71b.png"
                alt=""
              >
            </div>
            <div class="text">暂无数据</div>
          </div> -->
          <div ref="views" class="view" style="width:100%" />
        </div>
      </div>
      <div class="bottom-main" />
      <div class="bottom-right">
        <div class="top">
          <div class="renxiao">人效排名（月度）</div>
          <el-select v-model="selectValue" placeholder="全部" class="quanbu">
            <el-option
              v-for="item in region"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </div>
        <el-tabs type="border-card" class="tabs">
          <el-tab-pane label="运营人员" class="tab" />
          <el-tab-pane label="运维人员" />
        </el-tabs>
        <div class="bottom">
          <div class="img">
            <img
              src="https://likede2-admin.itheima.net/img/empty.87c4f71b.png"
              alt=""
            >
          </div>
          <div class="text">暂无数据</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import moment from 'moment'
import { getRegionList, getHeaderList, getCollectList } from '@/api/personnel'
import { currentWeek, dateInit, currentYear } from '@/utils/sameMonth'
export default {
  name: 'UserTask',
  data() {
    return {
      queryParam: {
        payData: []
      },
      activeName: '0',
      selectValue: '',
      region: '',
      viewData: '',
      paramsObj: {
        start: ''
      },
      headerData: {},
      headerDatas: {},
      view: '',
      allTime: '',
      xAxisData: [],
      bottomData: [],
      finishCount: [],
      cancelCount: []
    }
  },
  watch: {
    bottomData() {
      this.views.setOption({
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          bottom: 0,
          data: [
            {
              name: '完成工单'
            },
            {
              name: '取消工单',
              textStyle: {
                color: 'red'
              }
            }
          ]
        },
        xAxis: {
          type: 'category',
          name: '日期',
          // boundaryGap: false,
          data: this.xAxisData
        },
        yAxis: {
          type: 'value',
          name: '工单量:个',
          min: 0,
          max: 1,
          invertal: 0.2
        },
        graphic: [
          {
            type: 'rect',
            left: 'center',
            top: 'center',
            z: 100,
            shape: {
              // width: 1400,
              // height: 500
            },
            style: {
              fill: 'rgba(248, 250, 253, 1)'
            }
          },
          {
            type: 'text', // 类型：文本
            left: 'center',
            top: '65%',
            z: 100,
            silent: true, // 不响应事件
            invisible: this.bottomData.length > 0, // 有数据就隐藏
            style: {
              fill: '#20232a',
              text: '暂无数据',
              fontSize: '14px'
            }
          },
          {
            type: 'image',
            left: 'center',
            top: 'center',
            z: 100,
            invisible: this.bottomData.length > 0, // 有数据就隐藏
            style: {
              image: 'https://likede2-admin.itheima.net/img/empty.87c4f71b.png',
              width: 130,
              height: 100
            }
          }
        ],
        series: [
          {
            name: '完成工单',
            data: this.finishCount,
            type: 'bar'
          },
          {
            name: '取消工单',
            color: 'rgb(255,0,0)',
            data: this.cancelCount,
            type: 'bar'
          }
        ]
      })
    }
  },
  async created() {
    // 区域
    const { currentPageRecords } = await getRegionList({
      pageIndex: 1,
      pageSize: 100000
    })
    console.log(currentPageRecords)
    this.region = currentPageRecords
    // 头部信息
    this.paramsObj.start = this.startOfDay(new Date())
    this.paramsObj.end = this.endOfDay(new Date())
    const data = await getHeaderList(this.paramsObj)
    console.log(data)
    this.headerData = data[0]
    this.headerDatas = data[1]
    // 图表数据 周的时候
    this.$nextTick(() => {
      this.allTime = currentWeek()
      this.allTime.pop()
      this.queryParam.payData = this.allTime
      this.getViewsDate(this.allTime)
    })
  },
  mounted() {
    // 获取展示的数据 设置给图表
    this.views = echarts.init(this.$refs.views)
    console.log(this.views)
  },
  methods: {
    handleClick(tab, event) {
      if (tab.index === '0') {
        this.allTime = currentWeek()
        this.allTime.pop()
        this.queryParam.payData = this.allTime
        this.getViewsDate(this.allTime)
      } else if (tab.index === '1') {
        this.allTime = dateInit()
        this.queryParam.payData = this.allTime
        this.getViewsDate(this.allTime)
      } else if (tab.index === '2') {
        this.allTime = currentYear()
        this.queryParam.payData = this.allTime
        this.getViewsDate(this.allTime)
      }
    },
    // 图标数据
    async getViewsDate(allTime) {
      const data1 = await getCollectList({
        start: allTime[0],
        end: allTime[1]
      })
      this.bottomData = data1
      console.log(this.bottomData)
      this.xAxisData = data1.map(item => {
        return item.collectDate
      })
      this.finishCount = data1.map(item => {
        return item.finishCount
      })
      this.cancelCount = data1.map(item => {
        return item.cancelCount
      })
    },
    // 某一天的 00:00:00
    startOfDay(date) {
      return moment(date).startOf('day').format('YYYY-MM-DD HH:mm:ss')
    },
    // 某一天的 23:59:59
    endOfDay(date) {
      return moment(date).endOf('day').format('YYYY-MM-DD HH:mm:ss')
    }
  }
}
</script>

<style scoped lang="scss">
.box {
  padding: 20px;
  .top {
    width: 100%;
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
    .top_lift {
      flex: 1;
      margin-right: 20px;
      border-radius: 20px;
      background-color: #e9f3ff;
      padding: 20px;
      height: 190px;
      line-height: 35px;
      background-image: url(),
        url();
      background-repeat: no-repeat, no-repeat;
      background-position: 0 0, calc(100% - 12px) 100%;
      .header {
        font-size: 16px;
        color: #333;
        font-weight: 600;
      }
      .body {
        ul {
          height: 105px;
          display: flex;
          li {
            list-style: none;
            flex: 1;

            div {
              font-size: 36px;
              color: #072074;
              font-weight: 600;
              height: 50px;
              line-height: 50px;
              text-shadow: 2px 4px 7px rgb(85 132 255 / 50%);
            }
            span {
              font-size: 12px;
              color: #91a7dc;
            }
          }
        }
      }
    }
    .top_right {
      flex: 1;
      border-radius: 20px;
      padding: 20px;
      height: 190px;
      line-height: 35px;
      background: #fbefe8
        url(https://likede2-admin.itheima.net/img/operation.4120cc58.png)
        no-repeat calc(100% - 12px) 100%;
      .header {
        font-size: 16px;
        color: #333;
        font-weight: 600;
      }
      .body {
        ul {
          height: 95px;
          display: flex;
          li {
            list-style: none;
            flex: 1;

            div {
              font-size: 36px;
              color: #ff5757;
              font-weight: 600;
              height: 50px;
              line-height: 50px;
              text-shadow: 2px 4px 7px rgb(255 99 85 / 50%);
            }
            span {
              font-size: 12px;
              color: #de9690;
            }
          }
        }
      }
    }
  }
  .bottom {
    min-height: 542px;
    display: flex;
    background-color: #ffffff;
    .bottom-left {
      flex: 1;
      padding: 20px;
        margin-right: 20px;
      .left-top {
        display: flex;
        justify-content: space-between;
        // background-color: #072074;
        .text {
          font-size: 16px;
          font-weight: 600;
          color: #333;
        }
        .time {
          display: flex;
          .daterange {
            width: 280px;
            margin-right: 20px;
          }
        }
      }
      .left-bottom {
        width: 100%;
        min-height: 500px;
        display: flex;
        .one {
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          margin: auto;
          .text {
            margin-top: 30px;
          }
        }
        .view {
          width: 100%;
          min-height: 500px;
        }
      }
    }
    .bottom-main{
      width: 20px;
      min-height: 542px;
      background-color: #f8fafd;
    }
    .bottom-right {
      width: 370px;
      padding: 20px;
      .top {
        display: flex;
        height: 52px;
        justify-content: space-between;
        line-height: 52px;
        .renxiao {
          font-size: 16px;
          color: #333;
          font-weight: 600;
        }
        .quanbu {
          width: 100px;
        }
      }
      .tabs {
        width:196px;
        height: 40px;
        margin: auto;
      }
      .bottom {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin-top: -60px;
        .img {
          width: 123px;
          height: 96px;
          img {
            width: 100%;
            height: 100px;
          }
        }
        .text {
          margin-top: 25px;
          color: #20232a;
          font-size: 14px;
        }
      }
    }
  }
}
</style>
